<template>
  <el-table :data style="width: 100%">
    <el-table-column prop="field" label="属性名" :width="type !== 'exposes' ? 150 : 200">
      <template #default="scope">
        <span>{{ scope.row.field }}</span>
        <span class="tag-container" v-if="scope.row.tag">
          <el-tag size="small" effect="plain" hit round disable-transitions>{{ scope.row.tag }}</el-tag>
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="explain" label="说明" min-width="100" />
    <el-table-column prop="type" label="类型" width="170">
      <template #default="scope">
        <span>{{ scope.row.type }}</span>

        <el-popover v-if="scope.row.typeDetail" placement="bottom" trigger="click" :content="scope.row.typeDetail"
          popper-style="width: auto; min-width: 10px !important;">
          <template #reference>
            <span class="tag-container more">
              <el-tag class="more-icon" effect="plain" type="info" hit round disable-transitions>!</el-tag>
            </span>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column prop="required" label="必填" width="60" align="center" v-if="type !== 'exposes'">
      <template #default="scope">
        <span>{{ scope.row.required ? '是' : '-' }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="default" label="默认值" width="100" align="center" v-if="type !== 'exposes'">
      <template #default="scope">
        <span>{{ scope.row.default || '-' }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { ElTable, ElTableColumn, ElTag, ClickOutside as vClickOutside, ElPopover } from 'element-plus'
interface Data {
  field: string
  explain: string
  type: string
  required: boolean
  default?: any
  typeDetail?: string
}
interface Props {
  data: Data[]
  type: string
}
withDefaults(defineProps<Props>(), {})
</script>
<style scoped>
.tag-container {
  margin-left: 6px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}

.tag-container.more {
  cursor: pointer;
  border-radius: 5px;
  transition: .5s;
}

.tag-container.more,
.tag-container.more>.more-icon {
  scale: 0.6;
  transition: .5s;
  user-select: none;
  background-color: var(--vp-c-bg);
}

.tag-container.more:hover,
.tag-container.more:hover>.more-icon {
  background-color: var(--vp-sidebar-bg-color);
}

.el-tag--plain,
.el-tag--plain.el-tag--primary {
  background-color: var(--vp-c-bg);
}
</style>